<template>
  <div v-if="!mark">
    <el-table
      height="600"
      :data="tableData"
      type="selection"
      class="w-full"
      :header-cell-class-name="cellClass"
      :header-cell-style="{
        background: '#FEF0E6',
        color: '#EF6800',
        'text-align': 'center',
      }"
      highlight-current-row
      @select="select"
      @select-all="selectAll"
      ref="tableRef"
    >
      <el-table-column type="selection" align="center"> </el-table-column>
      <el-table-column
        width="150"
        align="center"
        label="操作"
        v-if="route.query.type != 4"
      >
        <template #default="scope">
          <div class="flex items-center justify-center">
            <div
              class="min-w-[45px] mr-[5px] min-h-[25px] flex justify-center items-center text-[13px] rounded-[4px] text-white bg-[#EF6800] border-[#EF6800] border cursor-pointer"
              v-if="
                (route.query.type == 1 || route.query.type == 3) &&
                scope.row.bx_id != 4 &&
                scope.row.bx_id != 5 &&
                scope.row.bx_id != 6 &&
                parentIndex == 0
              "
              @click="operate(0, scope.row)"
            >
              复制
            </div>
            <div
              class="min-w-[45px] min-h-[25px] flex justify-center items-center text-[13px] rounded-[4px] text-[#EF6800] border-[#EF6800] border cursor-pointer"
              v-if="route.query.type == 1 && parentIndex == 0"
              @click="operate(1, scope.row)"
            >
              查看
            </div>
            <div
              class="min-w-[45px] min-h-[25px] flex justify-center items-center text-[13px] text-[#EF6800] rounded-[4px] border border-[#EF6800] ml-[5px] cursor-pointer"
              v-if="
                route.query.type == 1 &&
                parentIndex == 0 &&
                scope.row.bx_id >= 19 &&
                scope.row.bx_id <= 24 &&
                scope.row.pay_method > 1 &&
                scope.row.bd_no
              "
              @click="operate(8, scope.row)"
            >
              撤单
            </div>
            <div
              class="min-w-[45px] min-h-[25px] flex justify-center items-center text-[13px] rounded-[4px] text-white bg-[#EF6800] border-[#EF6800] border cursor-pointer"
              v-if="route.query.type == 2 && parentIndex == 0"
              @click="operate(2, scope.row)"
            >
              修改
            </div>
            <div
              class="min-w-[45px] min-h-[25px] flex justify-center items-center text-[13px] text-white bg-[#EF6800] border-[#EF6800] rounded-[4px] border cursor-pointer ml-[5px]"
              v-if="route.query.type == 0 && parentIndex == 0"
              @click="operate(4, scope.row)"
            >
              支付
            </div>
            <div
              class="min-w-[45px] min-h-[25px] flex justify-center items-center text-[13px] text-[#EF6800] rounded-[4px] border border-[#EF6800] ml-[5px] cursor-pointer"
              v-if="route.query.type == 2 || (route.query.type == 0 && parentIndex == 0)"
              @click="operate(3, scope.row)"
            >
              删除
            </div>
            <div
              class="min-w-[45px] min-h-[25px] flex justify-center items-center text-[13px] text-white bg-[#EF6800] border-[#EF6800] rounded-[4px] border cursor-pointer ml-[5px]"
              v-if="route.query.type == 0 && parentIndex == 1"
              @click="operate(7, scope.row)"
            >
              批改
            </div>
            <!-- <div
              class="min-w-[45px] min-h-[25px] flex justify-center items-center  text-[13px] text-[#EF6800] rounded-[4px] border border-[#EF6800] ml-[5px] cursor-pointer"
              v-if="route.query.type == 0 && parentIndex == 1" @click="operate(6, scope.row)">
              删除
            </div> -->
            <div
              class="min-w-[45px] min-h-[25px] flex justify-center items-center text-[13px] text-[#EF6800] rounded-[4px] border border-[#EF6800] ml-[5px] cursor-pointer"
              v-if="route.query.type == 1 && parentIndex == 1"
              @click="operate(5, scope.row)"
            >
              查看
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="order_no" label="订单号" width="150" align="center">
      </el-table-column>
      <!-- <el-table-column prop="date" label="批改申请号"> </el-table-column> -->
      <el-table-column
        v-if="parentIndex == 0"
        prop="product_name"
        label="产品名称"
        class="min-w-[180px]"
        align="center"
      >
      </el-table-column>
      <el-table-column
        v-if="parentIndex == 1"
        prop="insurance_name"
        label="产品名称"
        class="min-w-[180px]"
        align="center"
      >
      </el-table-column>
      <el-table-column
        v-if="parentIndex == 0"
        prop="insure_name"
        label="投保人"
        width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column
        v-if="parentIndex == 1"
        prop="username"
        label="投保人"
        width="150"
        align="center"
      >
      </el-table-column>
      <!-- <el-table-column prop="date" label="被保险人" width="150" align="center">
      </el-table-column> -->
      <el-table-column prop="bd_no" label="保单号" width="150" align="center">
      </el-table-column>
      <el-table-column
        v-if="parentIndex == 0"
        prop="create_time"
        label="出单时间"
        width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        v-if="parentIndex == 1"
        prop="pay_time"
        label="出单时间"
        width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="total_price" label="保单保费" width="150" align="center">
      </el-table-column>

      <el-table-column prop="start_time" label="起保日期" width="100" align="center">
      </el-table-column>
      <el-table-column prop="end_time" label="终保日期" width="100" align="center">
      </el-table-column>
      <!-- <el-table-column
        label="作废时间"
        v-if="route.query.type == 1"
        align="center"
      >
      </el-table-column> -->

      <!-- <el-table-column label="支付状态" v-if="route.query.type != 0" align="center">
        <template #default="scope">
          <div class="text-center">
            {{ scope.row.state == 1 ? "未支付" : "已支付" }}
          </div>
        </template>
      </el-table-column> -->
      <!-- <el-table-column prop="date" label="提示信息" align="center">
      </el-table-column> -->
      <!-- <el-table-column label="支付方式" v-if="route.query.type == 1" align="center">
      </el-table-column> -->
      <el-table-column
        prop="total_price"
        label="最新保费"
        width="150"
        align="center"
        v-if="route.query.type == 1"
      >
      </el-table-column>
    </el-table>
  </div>
  <!-- 批单 -->
  <div v-if="mark">
    <el-table
      height="600"
      :data="tableData"
      type="selection"
      class="w-full"
      :header-cell-class-name="cellClass"
      :header-cell-style="{
        background: '#FEF0E6',
        color: '#EF6800',
        'text-align': 'center',
      }"
      highlight-current-row
      @select="select"
      @select-all="selectAll"
      ref="tableRef"
    >
      <!-- <el-table-column type="selection" align="center"> </el-table-column> -->
      <el-table-column width="150" align="center" label="操作">
        <template #default="scope">
          <div class="flex items-center justify-center">
            <div
              class="min-w-[45px] min-h-[25px] flex justify-center items-center text-[13px] text-white bg-[#EF6800] border-[#EF6800] rounded-[4px] border cursor-pointer ml-[5px]"
              v-if="route.query.type == 0 && parentIndex == 1"
              @click="operate(5, scope.row)"
            >
              查看
            </div>
            <!-- <div
              class="min-w-[45px] min-h-[25px] flex justify-center items-center  text-[13px] text-[#EF6800] rounded-[4px] border border-[#EF6800] ml-[5px] cursor-pointer"
              v-if="route.query.type == 0 && parentIndex == 1" @click="operate(6, scope.row)">
              取消
            </div> -->
            <div
              class="min-w-[45px] min-h-[25px] flex justify-center items-center text-[13px] text-[#EF6800] rounded-[4px] border border-[#EF6800] ml-[5px] cursor-pointer"
              v-if="route.query.type == 1 && parentIndex == 1"
              @click="operate(5, scope.row)"
            >
              查看
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="request_no" label="申请单号" align="center">
      </el-table-column>
      <el-table-column prop="endorse_no" label="批单号" align="center"> </el-table-column>
      <el-table-column prop="bd_no" label="保单号" align="center"> </el-table-column>

      <el-table-column prop="create_time" label="批改时间" width="100" align="center">
      </el-table-column>

      <el-table-column label="批改类型" align="center">
        <template #default="scope">
          <div>
            <span v-if="scope.row.type == 1">批增被保人</span>
            <span v-if="scope.row.type == 2">批改投保人</span>
            <span v-if="scope.row.type == 3">批改被保人</span>
            <span v-if="scope.row.type == 4">批减被保人</span>
            <span v-if="scope.row.type == 5">批改工程信息</span>
            <span v-if="scope.row.type == 6">批改地址信息</span>
            <span v-if="scope.row.type == 7">批改特约</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="start_time" label="起保日期" width="100" align="center">
      </el-table-column>
      <el-table-column prop="end_time" label="终保日期" width="100" align="center">
      </el-table-column>
      <!-- <el-table-column prop="create_time" label="下单时间" align="center">
      </el-table-column> -->
    </el-table>
  </div>
</template>
<script setup lang="ts">
import { ref, defineProps, watchEffect, inject, defineEmits, computed } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import type { TableInstance } from "element-plus";
import { useRoute, useRouter } from "vue-router";
import { orderDel, cancelDadi } from "@/utils/api";
const props = defineProps({
  table: { type: Array },
});
const emit = defineEmits(["getData", "select", "selectAll"]);
const message = inject<any>("message");
const route = useRoute();
const router = useRouter();
const tableData = ref([] as any[]);
const index = ref<number>();
const selectRow = ref();
const tableRef = ref<TableInstance>();
const cellClass = (row: any) => {
  if (row.columnIndex === 0) {
    return "disabledCheck";
  }
};
const mark = computed({
  get: () => {
    return route.query.mark;
  },
  set: () => {
    return;
  },
});

const parentIndex = computed({
  get: () => {
    return route.query.parentIndex;
  },
  set: () => {
    return;
  },
});
const flag = computed(() => {
  let date = new Date().getTime();

  return false;
});
const operate = async (i: number, row: any) => {
  // console.log(row.id);

  //0 是复制 1是查看 2是修改 3是删除 4是支付 5是批单查看 6是批单取消 7是批改 8是撤单
  switch (i) {
    case 0:
      //紫金意外险
      if (row.bx_id == 3) {
        router.push(
          "/index/zj_dqyw/pay?order_id=" + row.id + "&id=" + row.bx_id + "&is_copy=1"
        );
      } else if (row.bx_id == 1) {
        //紫金实习生意外险
        router.push(
          "/index/zj_sxs/pay?order_id=" + row.id + "&id=" + row.bx_id + "&is_copy=1"
        );
      } else if (row.bx_id == 2) {
        router.push(`/index/detail/pay?order_id=${row.id}&id=${row.bx_id}&is_copy=1`);
      } else if (row.bx_id == 7) {
        router.push(`/index/zz_jgyq/pay?order_id=${row.id}&id=${row.bx_id}&is_copy=1`);
      } else if (row.bx_id == 8) {
        router.push(`/index/zz_gz/pay?order_id=${row.id}&id=${row.bx_id}&is_copy=1`);
      } else if (row.bx_id == 19) {
        router.push(`/index/dd_jgyq/pay?order_id=${row.id}&id=${row.bx_id}&is_copy=1`);
      } else if (row.bx_id == 20) {
        router.push(`/index/dd_ccyqx/pay?order_id=${row.id}&id=${row.bx_id}&is_copy=1`);
      } else if (row.bx_id == 21) {
        router.push(`/index/dd_ccyqx/pay?order_id=${row.id}&id=${row.bx_id}&is_copy=1`);
      } else if (row.bx_id == 22) {
        router.push(`/index/dd_gz/pay?order_id=${row.id}&id=${row.bx_id}&is_copy=1`);
      } else if (row.bx_id == 23) {
        router.push(`/index/dd_gz/pay?order_id=${row.id}&id=${row.bx_id}&is_copy=1`);
      } else if (row.bx_id == 24) {
        router.push(`/index/dd_jggzx/pay?order_id=${row.id}&id=${row.bx_id}&is_copy=1`);
      }
      break;
    case 1:
      router.push("/index/order/detail?order_id=" + row.id + "&id=" + row.bx_id);
      break;

    case 2:
      //修改
      //紫金意外险
      if (row.bx_id == 3) {
        router.push("/index/zj_dqyw/pay?order_id=" + row.id + "&id=" + row.bx_id);
      } else if (row.bx_id == 1) {
        //紫金实习生意外险
        router.push("/index/zj_sxs/pay?order_id=" + row.id + "&id=" + row.bx_id);
      } else if (row.bx_id == 2) {
        router.push(`/index/detail/pay?order_id=${row.id}&id=${row.bx_id}`);
      } else if (row.bx_id == 7) {
        router.push("/index/zz_jgyq/pay?order_id=" + row.id + "&id=" + row.bx_id);
      } else if (row.bx_id == 8) {
        router.push("/index/zz_gz/pay?order_id=" + row.id + "&id=" + row.bx_id);
      } else if (row.bx_id == 19) {
        router.push("/index/dd_jgyq/pay?order_id=" + row.id + "&id=" + row.bx_id);
      } else if (row.bx_id == 20) {
        router.push("/index/dd_ccyqx/pay?order_id=" + row.id + "&id=" + row.bx_id);
      } else if (row.bx_id == 21) {
        router.push("/index/dd_ccyqx/pay?order_id=" + row.id + "&id=" + row.bx_id);
      } else if (row.bx_id == 22) {
        router.push("/index/dd_gz/pay?order_id=" + row.id + "&id=" + row.bx_id);
      } else if (row.bx_id == 23) {
        router.push("/index/dd_gz/pay?order_id=" + row.id + "&id=" + row.bx_id);
      } else if (row.bx_id == 24) {
        router.push("/index/dd_jggzx/pay?order_id=" + row.id + "&id=" + row.bx_id);
      }

      break;
    case 3:
      ElMessageBox.confirm("确认要删除吗？", "删除", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await orderDel({ id: row.id });
          if (res.code == 1) {
            message.success(res.msg);
            emit("getData");
          } else {
            message.warn(res.msg);
          }
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "取消删除",
          });
        });

      break;
    case 4:
      //紫金意外险
      if (row.bx_id == 3) {
        router.push("/index/zj_dqyw/pay?order_id=" + row.id + "&id=" + row.bx_id);
      } else if (row.bx_id == 1) {
        //紫金实习生意外险
        router.push("/index/zj_sxs/pay?order_id=" + row.id + "&id=" + row.bx_id);
      } else if (row.bx_id == 2) {
        router.push(`/index/detail/pay?order_id=${row.id}&id=${row.bx_id}`);
      } else if (row.bx_id == 7) {
        router.push("/index/zz_jgyq/pay?order_id=" + row.id + "&id=" + row.bx_id);
      } else if (row.bx_id == 8) {
        router.push("/index/zz_gz/pay?order_id=" + row.id + "&id=" + row.bx_id);
      } else if (row.bx_id == 19) {
        router.push("/index/dd_jgyq/pay?order_id=" + row.id + "&id=" + row.bx_id);
      } else if (row.bx_id == 20) {
        router.push("/index/dd_ccyqx/pay?order_id=" + row.id + "&id=" + row.bx_id);
      } else if (row.bx_id == 21) {
        router.push("/index/dd_ccyqx/pay?order_id=" + row.id + "&id=" + row.bx_id);
      } else if (row.bx_id == 22) {
        router.push("/index/dd_gz/pay?order_id=" + row.id + "&id=" + row.bx_id);
      } else if (row.bx_id == 23) {
        router.push("/index/dd_gz/pay?order_id=" + row.id + "&id=" + row.bx_id);
      } else if (row.bx_id == 24) {
        router.push("/index/dd_jggzx/pay?order_id=" + row.id + "&id=" + row.bx_id);
      }
      break;
    case 5:
      //批单详情
      router.push(
        "/index/person/markDetail?id=" +
          row.id +
          "&type=" +
          route.query.type +
          "&parentIndex=" +
          route.query.parentIndex
      );
      break;
    case 6:
      break;
    //取消
    case 7:
      //批改
      router.push(
        "/index/person/orderPay?type=0&parentIndex=1&order_id=" +
          row.id +
          "&mark=1" +
          "&bx_id=" +
          row.bx_id
      );

      break;
    case 8:
      //撤单
      let date = new Date().getTime();
      let s = new Date(row.start_time).getTime();

      if (s - date > 0) {
        ElMessageBox.confirm("确认要撤单吗？", "撤单", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            const r8 = await cancelDadi({ id: row.id });
            if (r8.code == 1) {
              message.success(r8.msg);
              emit("getData");
            } else {
              message.warning(r8.msg);
            }
          })
          .catch(() => {
            ElMessage({
              type: "info",
              message: "取消撤单",
            });
          });
      } else {
        message.warning("已经超过起保日期,撤单失败");
      }

      break;
  }
};
const select = (row: any) => {
  selectRow.value = tableRef.value!.getSelectionRows();
  selectRow.value.forEach((item: Object, rowIndex: number) => {
    if (item == row) {
      // console.log(rowIndex);
      index.value = rowIndex;
    }
  });
  emit("select", row);
};
const selectAll = (arr: any[]) => {
  emit("selectAll", arr);
};
watchEffect(() => {
  if (props.table) {
    tableData.value = props.table;
  }
});
</script>
<style lang="scss" scoped>
:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  //   display: none !important;
  --border: 1px solid rgb(255, 255, 255, 0.2);
  // background: url("../../assets/home/active.png") no-repeat;
  border: var(--border) !important;
  background-color: #ef6800 !important;
}

:deep(.el-table .disabledCheck .cell .el-checkbox .el-checkbox__inner) {
  border: 1px solid #ef6800;
}

:deep(.el-table .cell .el-checkbox .el-checkbox__inner) {
  border: 1px solid #ef6800;
}

:deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner) {
  --border: 1px solid rgb(255, 255, 255, 0.2);
  // background: url("../../assets/home/active.png") no-repeat;
  border: var(--border) !important;
  background-color: #ef6800 !important;
}

:deep(.el-table__body tr.current-row > td) {
  background: rgba(239, 104, 0, 0.1) !important;
}

:deep(.el-table .rowIndex) {
  background: rgba(239, 104, 0, 0.1) !important;
}
</style>
